<template>
<!--商品基本信息-->
<div v-if="editDialogVisible2">
    <!--新增列表-->
    <el-form :inline="true" :model="dataForm" :rules="dataFormRules" ref="dataForm" label-width="115px" class="demo-dataForm">
        <!--隐藏id栏-->
        <el-row id="hiddenId">
            <el-form-item label="ID" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
        </el-row>

        <!--中间表单栏-->
        <el-row id="middleInfo">
            <!--左边1/3栏-->
            <el-col :span="8">
                <el-row class="rowMargin">
                    <el-form-item label="商品名称" prop="chineseName">
                        <el-input v-model="dataForm.chineseName" placeholder="请输入商品名称" clearable maxlength="60"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="副标题" prop="subtitle">
                        <el-input v-model="dataForm.subtitle" placeholder="请输入副标题" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row> 
                <el-row class="rowMargin">
                    <el-form-item label="商品品牌" prop="brandId">
                        <el-select v-model="dataForm.brandId" clearable>
                            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品条码" prop="barCode">
                        <el-input v-model="dataForm.barCode" placeholder="请输入商品条码" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品形式" prop="typeOfProduct">
                        <el-select v-model="dataForm.typeOfProduct" v-bind:disabled="isDisabled" clearable>
                            <el-option v-for="item in typeOfProductList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="高(mm)" prop="productHeight">
                        <el-input v-model="dataForm.productHeight" @input="dataForm.productHeight=dataForm.productHeight.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入高度" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="产地" prop="placeOriginName">
                        <el-input v-model="dataForm.placeOriginName" placeholder="请输入产地" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品中心词" prop="headWord">
                        <el-input v-model="dataForm.headWord" placeholder="用,分割" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
            </el-col>
            <!--中间1/3栏-->
            <el-col :span="8">
              <el-row class="rowMargin">
                    <el-form-item label="商品编码" prop="code">
                         <el-input v-model="dataForm.code" placeholder="请输入商品编码" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="副标题(英文)" prop="subtitleLan2">
                         <el-input v-model="dataForm.subtitleLan2" placeholder="请输入副标题(英文)" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品类目" prop="fullNamePath">
                        <tree-select :options="categoryData" placeholder="商品类目" noResultsText="暂无数据" @select="thisTreeClick" :props="defaultProps" v-model="dataForm.categoryId" :normalizer="normalizer" :disableBranchNodes="new Boolean(true)" style="width:230px" />
                    </el-form-item>
                </el-row>
                  <el-row class="rowMargin">  
                    <el-form-item label="商家内码" prop="merchantIsn">
                        <el-input v-model="dataForm.merchantIsn" placeholder="请输入商家内码" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">  
                    <el-form-item label="长(mm)" prop="productLength">
                        <el-input v-model="dataForm.productLength" @input="dataForm.productLength=dataForm.productLength.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入长度" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="毛重(g)" prop="grossWeight">
                        <el-input v-model="dataForm.grossWeight" @input="dataForm.grossWeight=dataForm.grossWeight.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入毛重" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="保质期(天)" prop="shelflifeDays">
                        <el-input v-model="dataForm.shelflifeDays" @input="dataForm.shelflifeDays=dataForm.shelflifeDays.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入保质期" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="搜索热词" prop="hotWord">
                        <el-input v-model="dataForm.hotWord"   placeholder="用,分割" clearable></el-input>
                    </el-form-item>
                </el-row>
                <!-- <el-row class="rowMargin">
                    <el-form-item label="校标类型：" prop="inventoryDisplay">
                        <el-select v-model="dataForm.inventoryDisplay" v-bind:disabled="isDisabled" default-first-option clearable>
                            <el-option v-for="item in inventoryDisplayData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row> -->
            </el-col>
            <!--右边1/3栏-->
            <el-col :span="8">
                <el-row class="rowMargin">
                    <el-form-item label="第三方编码" prop="thirdProductCode">
                        <el-input v-model="dataForm.thirdProductCode" placeholder="请输入第三方编码" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品名称(英文)" prop="englishName">
                        <el-input v-model="dataForm.englishName" placeholder="请输入第三方编码" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="主计量单位" prop="saleCalcUnitId">
                        <el-select v-model="dataForm.saleCalcUnitId" v-bind:disabled="isDisabled" clearable>
                            <el-option v-for="item in saleCalcUnitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品类型" prop="type">
                        <el-select v-model="dataForm.type" v-bind:disabled="isDisabled" clearable>
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

                <!-- <el-row class="rowMargin">
                    <el-form-item label="货号：" prop="artNo">
                        <el-input v-model="dataForm.artNo" placeholder="请输入货号" clearable></el-input>
                    </el-form-item>
                </el-row> -->
                <el-row class="rowMargin">
                    <el-form-item label="宽(mm)" prop="productWidth">
                        <el-input v-model="dataForm.productWidth" @input="dataForm.productWidth=dataForm.productWidth.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入宽度" clearable></el-input>
                    </el-form-item>
                </el-row>
                  <el-row class="rowMargin">
                    <el-form-item label="体积(cm^3)"  prop="productVolume">
                        <el-input v-model="dataForm.productVolume" @input="dataForm.productVolume=dataForm.productVolume.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" placeholder="请输入体积" clearable maxlength="80"></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="净重(g)" prop="netWeight">
                        <el-input v-model="dataForm.netWeight" style="width:25%" @input="dataForm.netWeight=dataForm.netWeight.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" ></el-input>
                        <el-input v-model="dataForm.netWeightStart"  style="width:25%" @input="dataForm.netWeightStart=dataForm.netWeightStart.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')" ></el-input>
                    </el-form-item>
                </el-row>
                <el-row class="rowMargin">
                    <el-form-item label="商品文字标签"  prop="textLable">
                        <el-input v-model="dataForm.textLable" placeholder="请输入商品文字标签" clearable ></el-input>
                    </el-form-item>
                </el-row>
<!--                 <el-row class="rowMargin">
                    <el-form-item label="药品商品：" prop="bomFlag">
                        <el-radio-group v-model="dataForm.pillFlag">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row> -->
            </el-col>
        </el-row>

        <!--发票栏-->
        <el-row class="underSelector">
            <el-col :span="8">
                <el-row>
                    <el-form-item label="是否支持发票" prop="invoice">
                        <el-radio-group v-model="dataForm.invoice">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="是否强制发票" prop="forceInvoice">
                        <el-radio-group v-model="dataForm.forceInvoice">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="关于发票说明" prop="explainInvoice">
                      <el-input v-model="dataForm.explainInvoice" placeholder="请输入发票说明" clearable ></el-input>
                    </el-form-item>
                </el-row>
            </el-col>
        </el-row>
    <!--分享 供应商  销售区域-->
    <el-row class="underSelector">
            <el-col :span="8">
                <el-row>
                    <el-form-item label="是否禁用分享" prop="share">
                        <el-radio-group v-model="dataForm.share">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="隐藏供应商名称" prop="hideSupplier">
                        <el-radio-group v-model="dataForm.hideSupplier">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="开放销售渠道" prop="explainInvoice">
                       <el-radio-group v-model="dataForm.hideSupplier">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
        </el-row>
 <el-row class="underSelector">
        <el-col :span="8">
                <el-row>
                    <el-form-item label="隐藏返回首页浮标" prop="hideBuoy">
                        <el-radio-group v-model="dataForm.hideBuoy">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="是否支持退换货" prop="retreatChange">
                        <el-radio-group v-model="dataForm.retreatChange">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-form-item label="是否行内自提" prop="selfRaising">
                       <el-radio-group v-model="dataForm.selfRaising">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
 </el-row>
  <el-row class="underSelector">
            <el-col :span="10">
                <el-row>
                    <el-form-item label="支持支付方式" prop="payMethod">
                        <el-radio-group v-model="dataForm.payMethod">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="7">
                <el-row>
                    <el-form-item label="购买方式" prop="purchaseMethod">
                        <el-radio-group v-model="dataForm.purchaseMethod">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
            <el-col :span="7">
                <el-row>
                    <el-form-item label="特权表示" prop="privilege">
                       <el-radio-group v-model="dataForm.privilege">
                            <el-radio :label="0">无</el-radio>
                            <el-radio :label="1">会员特权商品</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-col>
        </el-row>
  <!-- 下单超时 -->
   <el-row class="underSelector">
    <el-col :span="24">
      <el-row>
          <el-form-item label="下单超时失效时间 订单下单后静默" label-width="300px" prop="invalidTime">
             <el-input v-model="dataForm.invalidTime" placeholder="请输入" clearable >分钟超时失效</el-input>
          </el-form-item>
      </el-row>
    </el-col>
   </el-row>


        <!--商品保障栏-->
        <el-row class="underSelector">
            <el-col :span="24">
                <el-row>
                    <el-form-item label="商品保障" prop="guaranteeId">
                        <el-checkbox-group v-model="dataForm.guaranteeId">
                            <el-checkbox v-for="item in guaranteeList" :key="item.id" :label="item.id">{{ item.guaranteeName }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-col>
        </el-row>

        <!--底部按钮栏-->
        <el-row class="footerButton">
            <el-col :span="8" :offset="10">
                <el-form-item>
                    <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{ $t('action.submit') }}
                    </el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

</div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format, formatDate } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import AddOrUpdatePrice from './AddOrUpdatePrice'

export default {
  components: {
    KtButton,
    CyTable,
    TableColumnFilterDialog,
    TreeSelect,
    AddOrUpdatePrice
  },

  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      size: "small",
      defaultProps: {
        children: "categoryList",
        label: "name"
      },
      editDialogVisible2: true,
      editLoading: false,
      productId: 0,
      isDisabled: false, // 是否掩藏
      dataForm: {
        chineseName: null,
        subtitle: null,
        brandId: null,
        barCode: null,
        typeOfProduct: null,
        productHeight: null,
        placeOriginName: null,
        categoryId: null,
        productLength: null,
        grossWeight: null,
        shelflifeDays: null,
        code: null,
        subtitleLan2: null,
        merchantIsn: null,
        hotWord: null,
        thirdProductCode: null,
        saleCalcUnitId: null,
        type: null,
        productWidth: null,
        productVolume: null,
        netWeightStart: null,
        netWeight: null,
        textLable: null,
        englishName: null,
        productId: 0,
        guaranteeId: [],
        bomFlag: 0,
        pillFlag: 0,
        invoice: 1,
        forceInvoice: 1,
        explainInvoice: null,
        share: null,
        hideSupplier: null,
        hideBuoy: null,
        retreatChange: null,
        selfRaising: null,
        payMethod: null,
        purchaseMethod: null,
        privilege: null,
        invalidTime: null,
        id: "",
        fullNamePath: null,
        categoryId: null,
        inventoryDisplay: 1 // 校标商品
      }, // 新增编辑界面数据
      dataFormRules: {
        chineseName: [
          {
            required: true,
            max: 60,
            message: "请输入商品名称最长60个字符",
            trigger: "blur"
          }
        ],
        fullNamePath: [
          {
            required: true,
            message: "请输入商品类目",
            trigger: "change"
          }
        ],
        saleCalcUnitId: [
          {
            required: true,
            message: "请输入主计量单位",
            trigger: "change"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入商品编码",
            trigger: "change"
          }
        ],
        /*  thirdProductCode: [
          {
            required: true,
            message: "请输入第三方编码",
            trigger: "change"
          }
        ], */
        typeOfProduct: [
          {
            required: true,
            message: "请输入商品形式",
            trigger: "change"
          }
        ]
      }, // form表单校验
      brandList: [], // 品牌
      guaranteeList: [], // 保障
      saleCalcUnitList: [], // 计量单位
      typeOfProductList: [
        {
          value: 1,
          label: "普通商品"
        },
        {
          value: 2,
          label: "系列虚品"
        }
      ], // 商品形式
      typeList: [
        {
          value: 1,
          label: "实体商品"
        },
        {
          value: 2,
          label: "虚拟商品"
        },
        {
          value: 3,
          label: "虚拟组合"
        },
        {
          value: 4,
          label: "实物组合"
        },
        {
          value: 11,
          label: "虚拟卡"
        },
        {
          value: 41,
          label: "虚拟充值"
        },
      ], // 商品类型
      categoryData: [], // 类目
      categoryDialogVisible: false, // 类目是否显示
      defaultProps: {
        children: "categoryList",
        label: "name"
      },
      productCategory: "", // 商品类目
      inventoryDisplayData: [
        {
          value: 1,
          label: "基本款校标"
        },
        {
          value: 2,
          label: "校标款校标"
        }
      ] // 库存显示
    };
  },

  mounted() {
    this.productId = this.$route.params.productId;
    this.getDataList();
    this.queryProductBrand();
    this.queryProductGuarantee();
    this.queryProductUnitsList();
    this.selectCategory();
  },

  methods: {
    init(param) {
      let _this = this;
      _this.editDialogVisible2 = param.flag;
      _this.productId = param.productId;
      if (param.flag) {
        _this.getDataList();
      }
    },
    //格式化商品类目查询条件
    normalizer(node) {
      if (node.categoryList == null || node.categoryList.length == 0) {
        delete node.categoryList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.categoryList
      };
    },

    //查询所有品牌
    queryProductBrand() {
      let _this = this;
      if (_this.user.deptType == 0) {
        this.utils.request.queryProductBrand({}, function(data) {
          if (data.data != null) {
            _this.brandList = data.data;
          }
        });
      } else {
        this.utils.request.queryMerchantProductBrand({}, function(data) {
          if (data.data != null) {
            _this.brandList = data.data;
          }
        });
      }
    },

    //查询所有保障
    queryProductGuarantee() {
      let _this = this;
      this.utils.request.queryProductGuarantee({}, function(data) {
        if (data.data != null) {
          _this.guaranteeList = data.data;
        }
      });
    },

    //查询所有计量单位
    queryProductUnitsList() {
      let _this = this;
      this.utils.request.queryProductUnitsList({}, function(data) {
        if (data.data != null) {
          _this.saleCalcUnitList = data.data;
        }
      });
    },

    selectCategory() {
      let this_ = this;
      if (this_.user.deptType == 0) {
        this_.queryBehindCategory();
      } else {
        this_.queryMerchantBehindCategory();
      }
    },

    //查询平台类目
    queryBehindCategory: function() {
      let params = {};
      let this_ = this;
      this.utils.request.queryBehindCategory(params, function(data) {
        this_.categoryData = data.data;
      });
    },

    //查询商家类目
    queryMerchantBehindCategory: function() {
      let params = {};
      let this_ = this;
      this.utils.request.queryMerchantBehindCategory(params, function(data) {
        this_.categoryData = data.data;
      });
    },

    thisTreeClick: function(data) {
      this.dataForm.categoryId = data.id;
      this.dataForm.fullNamePath = data.fullNamePath;
    },

    // 编辑
    submitForm: function() {
      let this_ = this;
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let params = Object.assign({}, this.dataForm);
            //TODO 根据需求配置不存的渠道 ---
            // params.channelCode = "B2C";
            if (this_.user.deptType == 0) {
              params.sourceType = 1;
            } else {
              params.sourceType = 2;
            }
            this.utils.request.addProductInfo(params, function(res) {
              if (res.code == "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
                if (this_.$router.history.current.name == "商品详情") {
                  this_.$router.push({
                    path: "/pages/product/productManagement"
                  });
                } else {
                  this_.$router.push({
                    path: "/BusinessProductInfo/"+res.data.id
                  });
                }
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },

    // 商品基本信息展示
    getDataList() {
      let this_ = this;
      if (this_.productId != 0) {
        this_.isDisabled = true;
        let params = {};
        params.productId = this_.productId;
        this.utils.request.queryProductInfo(params, function(data) {
          if (data.data != null) {
            this_.dataForm = data.data;
            if (this_.dataForm.inventoryDisplay === 0) {
              this_.dataForm.inventoryDisplay = "";
            }
          }
        });
      }
    }
  }
};
</script>

<style scoped>
#hiddenId {
  height: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

#middleInfo {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.rowMargin {
  margin-bottom: 14px;
}

#secondRow {
  border-bottom: 1px solid #ccc;
}

.underSelector {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.footerButton {
  padding-top: 20px;
}
</style>
